<template>
  <div>
	  <el-card shadow="hover">
		  <el-form ref="searchForm" :inline="true" :model="searchForm">
			  <el-form-item label="分类名" prop="book_cate_name">
				  <el-input v-model="searchForm.book_cate_name"></el-input>
			  </el-form-item>
			  <el-form-item label="分类值" prop="book_cate_value">
				  <el-input v-model="searchForm.book_cate_value"></el-input>
			  </el-form-item>
			  <el-form-item>
				  <el-button type="primary" @click="search">搜索</el-button>
				  <el-button @click="resetSearchForm">重置</el-button>
			  </el-form-item>
		  </el-form>
	  </el-card>
    <el-table :data="catelist" stripe style="width: 100%">
      <el-table-column
        prop="book_cate_name"
        label="分类名"
      ></el-table-column>
      <el-table-column
        prop="book_cate_value"
        label="分类值"
      ></el-table-column>
      <el-table-column label="操作" width="170">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="edit(scope.row)"
            >编辑</el-button
          >
          <el-popconfirm
            title="确定删除吗？"
            @confirm="deleteCate(scope.row.book_cate_id)"
          >
            <el-button size="mini" type="danger" slot="reference"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

	  <pagination
		  :page-size="listParams.pagesize"
		  :total="listParams.total"
		  :current-page="listParams.pagenum"
		  @size-change="sizeChange"
		  @current-change="currentChange"
	  />

    <!-- 编辑分类 -->
    <el-drawer
      title="编辑分类"
      :visible.sync="editDrawer"
      direction="rtl"
      :destroy-on-close="true"
      :before-close="editDrawerClose"
    >
      <el-form ref="editForm" :model="editForm" label-width="80px">
        <el-form-item label="分类名">
          <el-input v-model="editForm.catename"></el-input>
        </el-form-item>
        <el-form-item label="分类值">
          <el-input v-model="editForm.catevalue"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="confirmEdit">确认</el-button>
          <el-button @click="resetForm('editForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import pagination from "@/components/pagination.vue";
export default {
  name: "catelist",
  created() {
    this.getcatelist();
  },
    components: {
      pagination,
    },
  data() {
    return {
      catelist: [],
      listParams: {
        pagesize: 10,
        pagenum: 1,
        total: 0,
      },
	    searchForm: {
		  book_cate_name: '',
		    book_cate_value: ''
	    },
      editDrawer: false,
      editForm: {},
    };
  },
  methods: {
    async getcatelist() {
      const { data } = await this.http({
        method: "post",
        url: "/api/cate/list",
        data: {
			...this.listParams,
	        ...this.searchForm
        },
      });
      if (data.errno !== 0) {
        return this.msg({
          type: "error",
          message: "获取分类列表失败",
        });
      }
      this.catelist = data.data;
      this.listParams.total = data.total;
    },
    edit(data) {
      sessionStorage.setItem("editForm", JSON.stringify(data));
      this.editForm = {
          cateid: data.book_cate_id,
          catename: data.book_cate_name,
          catevalue: data.book_cate_value,
          ...data
        };
      this.editDrawer = true;
    },
    editDrawerClose() {
      this.editDrawer = false;
      sessionStorage.removeItem("editForm");
    },
    async confirmEdit() {
      const { data } = await this.http({
        method: "post",
        url: "/admin/cate/update",
        data: this.editForm,
      });
      if (data.errno !== 0) {
        return this.msg({
          type: "error",
          message: "编辑失败",
        });
      }
      this.msg({
        type: "success",
        message: data.message,
        onClose: () => {
          this.editDrawer = false;
          this.getcatelist();
        },
      });
    },
    resetForm() {
      this.editForm = JSON.parse(sessionStorage.getItem("editForm"));
    },
    async deleteCate(id) {
        const { data } = await this.http({
          method: "delete",
          url: "/api/cate/delete/" + id,
        });
        if (data.errno !== 0) {
          return this.msg({
            type: "error",
            message: "删除分类失败",
          });
        }
        this.msg({
          type: "success",
          message: "删除分类成功",
          onClose: () => {
            this.getcatelist();
          },
        });
    },
    sizeChange(val) {
      this.listParams.pagesize = val;
      this.getcatelist();
    },
    currentChange(val) {
      this.listParams.pagenum = val;
      this.getcatelist();
    },
	  search () {
		  this.getcatelist()
	  },
	  resetSearchForm () {
		  this.$refs['searchForm'].resetFields()
		  this.getcatelist()
	  },
  },
};
</script>

<style lang="less" scoped>
.el-pagination {
  margin-top: 20px;
}
</style>
